<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI dialog documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			"Dialog Widget",
		"excerpt":
			"Open content in an interactive overlay.",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script><article id="dialog1" class="entry widget"><h2 class="section-title">
<span>Dialog Widget</span><span class="version-details">version added: 1.0</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Open content in an interactive overlay.</p>
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-autoOpen">autoOpen</a></div>
<div><a href="#option-buttons">buttons</a></div>
<div><a href="#option-closeOnEscape">closeOnEscape</a></div>
<div><a href="#option-closeText">closeText</a></div>
<div><a href="#option-dialogClass">dialogClass</a></div>
<div><a href="#option-draggable">draggable</a></div>
<div><a href="#option-height">height</a></div>
<div><a href="#option-hide">hide</a></div>
<div><a href="#option-maxHeight">maxHeight</a></div>
<div><a href="#option-maxWidth">maxWidth</a></div>
<div><a href="#option-minHeight">minHeight</a></div>
<div><a href="#option-minWidth">minWidth</a></div>
<div><a href="#option-modal">modal</a></div>
<div><a href="#option-position">position</a></div>
<div><a href="#option-resizable">resizable</a></div>
<div><a href="#option-show">show</a></div>
<div><a href="#option-stack">stack</a></div>
<div><a href="#option-title">title</a></div>
<div><a href="#option-width">width</a></div>
<div><a href="#option-zIndex">zIndex</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-close">close</a></div>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-isOpen">isOpen</a></div>
<div><a href="#method-moveToTop">moveToTop</a></div>
<div><a href="#method-open">open</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-widget">widget</a></div>
</div>
<div class="quick-nav-section">
<h3>Events</h3>
<div><a href="#event-beforeClose">beforeClose</a></div>
<div><a href="#event-close">close</a></div>
<div><a href="#event-create">create</a></div>
<div><a href="#event-drag">drag</a></div>
<div><a href="#event-dragStart">dragStart</a></div>
<div><a href="#event-dragStop">dragStop</a></div>
<div><a href="#event-focus">focus</a></div>
<div><a href="#event-open">open</a></div>
<div><a href="#event-resize">resize</a></div>
<div><a href="#event-resizeStart">resizeStart</a></div>
<div><a href="#event-resizeStop">resizeStop</a></div>
</div></section><div class="longdesc" id="entry-longdesc">
		<p>A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the &apos;x&apos; icon by default.</p>

		<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>

		<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>

		<h3>Dependencies</h3>
		<ul>
			<li><a href="/category/ui-core/">UI Core</a></li>
			<li><a href="/jQuery.widget/">Widget Factory</a></li>
			<li><a href="/position/">Position</a></li>
			<li><a href="/button/">Button</a></li>
			<li>
<a href="/draggable/">Draggable</a> (optional; for use with the <a href="#option-draggable"><code>draggable</code></a> option)</li>
			<li>
<a href="/resizable/">Resizable</a> (optional; for use with the <a href="#option-resizable"><code>resizable</code></a> option)</li>
			<li>
<a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-show"><code>show</code></a> and <a href="#option-hide"><code>hide</code></a> options)</li>
		</ul>
	</div>
<h3>Additional Notes:</h3>
<div class="longdesc"><ul><li>
			This widget requires some functional CSS, otherwise it won&apos;t work. If you build a custom theme, use the widget&apos;s specific CSS file as a starting point.
		</li></ul></div>
<section id="options"><header><h2>Options</h2></header><div id="option-autoOpen" class="api-item first-item">
<h3>autoOpen&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will automatically open upon initialization. If <code>false</code>, the dialog will stay hidden until the <a href="#method-open"><code>open()</code></a> method is called.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>autoOpen</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  autoOpen: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>autoOpen</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoOpen = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;autoOpen&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;autoOpen&quot;</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-buttons" class="api-item">
<h3>buttons&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#Array">Array</a>
</div>
<div class="default">
<strong>Default: </strong><code>{}</code>
</div>
<div>Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: The keys are the button labels and the values are the callbacks for when the associated button is clicked.</li>
<li>
<strong>Array</strong>: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>buttons</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  buttons: [ { text: <span class="string">&quot;Ok&quot;</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">&quot;close&quot;</span> ); } } ]</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>buttons</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttons = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;buttons&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;buttons&quot;</span>, [ { text: <span class="string">&quot;Ok&quot;</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">&quot;close&quot;</span> ); } } ] );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-closeOnEscape" class="api-item">
<h3>closeOnEscape&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeOnEscape</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  closeOnEscape: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>closeOnEscape</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeOnEscape = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;closeOnEscape&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;closeOnEscape&quot;</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-closeText" class="api-item">
<h3>closeText&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div class="default">
<strong>Default: </strong><code>&quot;close&quot;</code>
</div>
<div>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeText</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  closeText: <span class="string">&quot;hide&quot;</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>closeText</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeText = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;closeText&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;closeText&quot;</span>, <span class="string">&quot;hide&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-dialogClass" class="api-item">
<h3>dialogClass&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div class="default">
<strong>Default: </strong><code>&quot;&quot;</code>
</div>
<div>The specified class name(s) will be added to the dialog, for additional theming.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>dialogClass</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dialogClass: <span class="string">&quot;alert&quot;</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>dialogClass</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dialogClass = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;dialogClass&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;dialogClass&quot;</span>, <span class="string">&quot;alert&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-draggable" class="api-item">
<h3>draggable&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be draggable by the title bar. Requires the <a href="/draggable/">jQuery UI Draggable wiget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>draggable</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  draggable: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>draggable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> draggable = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;draggable&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;draggable&quot;</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-height" class="api-item">
<h3>height&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div class="default">
<strong>Default: </strong><code>&quot;auto&quot;</code>
</div>
<div>The height of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>: The height in pixels.</li>
<li>
<strong>String</strong>: The only supported string value is <code>&quot;auto&quot;</code> which will allow the dialog height to adjust based on its content.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>height</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  height: <span class="number">400</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>height</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> height = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;height&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;height&quot;</span>, <span class="number">400</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-hide" class="api-item">
<h3>hide&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the hiding of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>: 
					The dialog will fade out while animating the height and width for the specified duration.
				</li>
<li>
<strong>String</strong>: 
					The dialog will be hidden using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
				</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>hide</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  hide: <span class="string">&quot;explode&quot;</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>hide</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> hide = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;hide&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;hide&quot;</span>, <span class="string">&quot;explode&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-maxHeight" class="api-item">
<h3>maxHeight&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a>
</div>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  maxHeight: <span class="number">600</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>maxHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxHeight = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;maxHeight&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;maxHeight&quot;</span>, <span class="number">600</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-maxWidth" class="api-item">
<h3>maxWidth&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a>
</div>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  maxWidth: <span class="number">600</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>maxWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxWidth = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;maxWidth&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;maxWidth&quot;</span>, <span class="number">600</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-minHeight" class="api-item">
<h3>minHeight&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a>
</div>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  minHeight: <span class="number">200</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>minHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minHeight = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;minHeight&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;minHeight&quot;</span>, <span class="number">200</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-minWidth" class="api-item">
<h3>minWidth&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a>
</div>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  minWidth: <span class="number">200</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>minWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minWidth = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;minWidth&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;minWidth&quot;</span>, <span class="number">200</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-modal" class="api-item">
<h3>modal&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>If set to <code>true</code>, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>modal</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  modal: <span class="literal">true</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>modal</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> modal = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;modal&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;modal&quot;</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-position" class="api-item">
<h3>position&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Array">Array</a>
</div>
<div class="default">
<strong>Default: </strong><code>{ my: &quot;center&quot;, at: &quot;center&quot;, of: window }</code>
</div>
<div>Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: Identifies the position of the dialog when opened. The <code>of</code> option defaults to the window, but you can specify another element to position against. You can refer to the <a href="/position/">jQuery UI Position</a> utility for more details about the various options.</li>
<li>
<strong>String</strong>: A string representing the position within the viewport. Possible values: <code>&quot;center&quot;</code>, <code>&quot;left&quot;</code>, <code>&quot;right&quot;</code>, <code>&quot;top&quot;</code>, <code>&quot;bottom&quot;</code>.</li>
<li>
<strong>Array</strong>: An array containing an <em>x, y</em> coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>position</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  position: { my: <span class="string">&quot;left top&quot;</span>, at: <span class="string">&quot;left bottom&quot;</span>, of: button }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>position</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> position = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;position&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;position&quot;</span>, { my: <span class="string">&quot;left top&quot;</span>, at: <span class="string">&quot;left bottom&quot;</span>, of: button } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-resizable" class="api-item">
<h3>resizable&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be resizable. Requires the <a href="/resizable/">jQuery UI Resizable widget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>resizable</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resizable: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>resizable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> resizable = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;resizable&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;resizable&quot;</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-show" class="api-item">
<h3>show&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the showing of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>: 
					The dialog will fade in while animating the height and width for the specified duration.
				</li>
<li>
<strong>String</strong>: 
					The dialog will be shown using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
				</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>show</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  show: <span class="string">&quot;slow&quot;</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>show</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> show = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;show&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;show&quot;</span>, <span class="string">&quot;slow&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-stack" class="api-item">
<h3>stack&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>stack</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  stack: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>stack</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> stack = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;stack&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;stack&quot;</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-title" class="api-item">
<h3>title&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div class="default">
<strong>Default: </strong><code>&quot;&quot;</code>
</div>
<div>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the <code>title</code> attribute on the dialog source element.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>title</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  title: <span class="string">&quot;Dialog Title&quot;</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>title</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> title = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;title&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;title&quot;</span>, <span class="string">&quot;Dialog Title&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-width" class="api-item">
<h3>width&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a>
</div>
<div class="default">
<strong>Default: </strong><code>300</code>
</div>
<div>The width of the dialog, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>width</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  width: <span class="number">500</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>width</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> width = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;width&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;width&quot;</span>, <span class="number">500</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-zIndex" class="api-item">
<h3>zIndex&#xA0;
					</h3>
<div class="option-type">
<strong>Type: </strong><a href="http://api.jquery.com/Types/#Integer">Integer</a>
</div>
<div class="default">
<strong>Default: </strong><code>1000</code>
</div>
<div>The starting z-index for the dialog.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>zIndex</code> option specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  zIndex: <span class="number">20</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>zIndex</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> zIndex = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;zIndex&quot;</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;zIndex&quot;</span>, <span class="number">20</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-close"><div class="api-item first-item">
<h3>close()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Closes the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the close method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;close&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-destroy"><div class="api-item">
<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
		Removes the dialog functionality completely. This will return the element back to its pre-init state.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;destroy&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-isOpen"><div class="api-item">
<h3>isOpen()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div>Whether the dialog is currently open.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the isOpen method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isOpen = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;isOpen&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-moveToTop"><div class="api-item">
<h3>moveToTop()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Moves the dialog to the top of the dialog stack.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the moveToTop method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;moveToTop&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-open"><div class="api-item">
<h3>open()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Opens the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the open method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;open&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-option">
<div class="api-item">
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
<ul><li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to get.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;disabled&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
</h3>
<div>Gets an object containing key/value pairs representing the current dialog options hash.</div>
<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets the value of the dialog option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, <span class="string">&quot;disabled&quot;</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets one or more options for the dialog.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;option&quot;</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
</div>
<div id="method-widget"><div class="api-item">
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
		Returns a <code>jQuery</code> object containing the generated wrapper.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the widget method:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">&quot;.selector&quot;</span> ).dialog( <span class="string">&quot;widget&quot;</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-beforeClose" class="api-item first-item">
<h3>beforeClose( event, ui )<span class="returns">Type: <code>dialogbeforeclose</code></span>
</h3>
<div>Triggered when a dialog is about to close. If canceled, the dialog will not close.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the beforeClose callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  beforeClose: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogbeforeclose event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogbeforeclose&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-close" class="api-item">
<h3>close( event, ui )<span class="returns">Type: <code>dialogclose</code></span>
</h3>
<div>Triggered when the dialog is closed.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the close callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  close: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogclose event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogclose&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-create" class="api-item">
<h3>create( event, ui )<span class="returns">Type: <code>dialogcreate</code></span>
</h3>
<div>
		Triggered when the dialog is created.
	</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the create callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogcreate event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogcreate&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-drag" class="api-item">
<h3>drag( event, ui )<span class="returns">Type: <code>dialogdrag</code></span>
</h3>
<div>Triggered while the dialog is being dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the drag callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  drag: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdrag event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogdrag&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-dragStart" class="api-item">
<h3>dragStart( event, ui )<span class="returns">Type: <code>dialogdragstart</code></span>
</h3>
<div>Triggered when the user starts dragging the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStart callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dragStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdragstart event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogdragstart&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-dragStop" class="api-item">
<h3>dragStop( event, ui )<span class="returns">Type: <code>dialogdragstop</code></span>
</h3>
<div>Triggered after the dialog has been dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStop callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dragStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdragstop event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogdragstop&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-focus" class="api-item">
<h3>focus( event, ui )<span class="returns">Type: <code>dialogfocus</code></span>
</h3>
<div>Triggered when the dialog gains focus.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the focus callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  focus: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogfocus event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogfocus&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-open" class="api-item">
<h3>open( event, ui )<span class="returns">Type: <code>dialogopen</code></span>
</h3>
<div>Triggered when the dialog is opened.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the open callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  open: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogopen event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogopen&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resize" class="api-item">
<h3>resize( event, ui )<span class="returns">Type: <code>dialogresize</code></span>
</h3>
<div>Triggered while the dialog is being resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resize callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resize: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresize event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogresize&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resizeStart" class="api-item">
<h3>resizeStart( event, ui )<span class="returns">Type: <code>dialogresizestart</code></span>
</h3>
<div>Triggered when the user starts resizing the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStart callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resizeStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresizestart event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogresizestart&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resizeStop" class="api-item">
<h3>resizeStop( event, ui )<span class="returns">Type: <code>dialogresizestop</code></span>
</h3>
<div>Triggered after the dialog has been resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStop callback specified:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resizeStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresizestop event:</p>
<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">&quot;.selector&quot;</span> ).on( <span class="string">&quot;dialogresizestop&quot;</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
<p>A simple jQuery UI Dialog</p>
<div class="syntaxhighlighter xml">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
						<div class="line n10">10</div>
					
						<div class="line n11">11</div>
					
						<div class="line n12">12</div>
					
						<div class="line n13">13</div>
					
						<div class="line n14">14</div>
					
						<div class="line n15">15</div>
					
						<div class="line n16">16</div>
					
						<div class="line n17">17</div>
					
						<div class="line n18">18</div>
					
						<div class="line n19">19</div>
					
						<div class="line n20">20</div>
					
						<div class="line n21">21</div>
					
						<div class="line n22">22</div>
					
						<div class="line n23">23</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">title</span>&gt;</span>dialog demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">&quot;stylesheet&quot;</span> <span class="attribute">href</span>=<span class="value">&quot;//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;//code.jquery.com/jquery-1.8.3.js&quot;</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;//code.jquery.com/ui/1.9.2/jquery-ui.js&quot;</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">&quot;opener&quot;</span>&gt;</span>open the dialog<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">&quot;dialog&quot;</span> <span class="attribute">title</span>=<span class="value">&quot;Dialog Title&quot;</span>&gt;</span>I&apos;m a dialog<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;#dialog&quot;</span> ).dialog({ autoOpen: <span class="literal">false</span> });</code></div></div><div class="container"><div class="line"><code>$( <span class="string">&quot;#opener&quot;</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">&quot;#dialog&quot;</span> ).dialog( <span class="string">&quot;open&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>


</body>
</html>
